<template>
<!-- dialog-expense-detail begin -->
<el-dialog
  width="468px"
  class="dialog-expense-detail"
  :title="`${titleMap[status]}费用`"
  :append-to-body="true"
  :close-on-click-modal="false"
  :visible.sync="dialogShow"
  @close="onHide()">
  <el-form
    ref="dialogForm"
    class="dialogForm"
    label-width="78px"
    size="small"
    :rules="rules"
    :model="dialogForm">
    <el-form-item v-show="false" prop="id">
      <el-input type="hidden" v-model="dialogForm.id" />
    </el-form-item>
    <el-form-item label="费用类型" prop="priceType">
      <dg-dict-select
        dictType="waybill_expense_type"
        v-model="dialogForm.priceType"
        clearable
        placeholder="请选择费用类型" />
    </el-form-item>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="计费运量" prop="priceAmount">
          <el-input-number class="w-full" v-model.trim="dialogForm.priceAmount" placeholder="计费运量" :min="0" controls-position="right" @change="calPriceCount()" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item class="w-full" label="计费单价" prop="priceUnit">
          <el-input-number class="w-full" v-model.trim="dialogForm.priceUnit" placeholder="计费单价" :min="0" controls-position="right" @change="calPriceCount()" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="费用合计" prop="priceCount">
      <el-input v-model="dialogForm.priceCount" placeholder="费用合计" disabled />
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input type="textarea" :rows="4" v-model.trim="dialogForm.remark" placeholder="请输入备注" clearable />
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button size="small" type="primary" :loading="dialogLoading" @click="dialogSubmit()">保 存</el-button>
    <el-button size="small" @click="dialogShow = false">关闭</el-button>
  </div>
</el-dialog>
<!-- dialog-expense-detail end -->
</template>

<script>
import { multiply } from '@/utils/calculating';
import * as API_Expense from '@/api/aliorder/expense';

export default {
  name: 'dialog-expense-detail',
  props: {
    // 弹层显示
    show: {
      type: Boolean,
      default: false
    },
    // 弹层状态
    status: {
      type: String,
      default: 'new'
    },
    // 订单 ID
    orderId: {
      type: [String, Number],
      default: undefined
    },
    // 费用 ID
    id: {
      type: [String, Number],
      default: undefined
    }
  },
  data () {
    return {
      dialogShow: false,
      titleMap: {
        'new': '新增',
        'edit': '修改'
      },
      dialogForm: {
        id: undefined,
        priceType: undefined,
        priceAmount: undefined,
        priceUnit: undefined,
        priceCount: undefined,
        remark: undefined
      },
      rules: {
        priceType: [
          { required: true, message: '请选择费用类型', trigger: 'change' }
        ],
        priceAmount: [
          { required: true, message: '请输入计费运量', trigger: ['change', 'blur'] }
        ],
        priceUnit: [
          { required: true, message: '请输入计费单价', trigger: ['change', 'blur'] }
        ]
      },
      // 弹层按钮加载中
      dialogLoading: false
    };
  },
  watch: {
    show (_newVal) {
      this.resetForm('dialogForm');
      if (_newVal) {
        if (this.status !== 'new') {
          this.getDetail();
        } else {
          this.dialogShow = _newVal;
        };
      } else {
        this.dialogShow = _newVal;
      };
    }
  },
  methods: {
    /**
      * @date 2025/07/13
      * @author wolfMan
      * @description {关闭弹层}
    */
    onHide () {
      this.$emit('update:show', false);
    },
    /**
      * @date 2025/07/13
      * @author wolfMan
      * @description {获取费用详细信息}
    */
    getDetail () {
      API_Expense.getDetailService(this.id).then(response => {
        let _useData = response.data || {};
        this.dialogShow = true;
        this.$nextTick(() => {
          this.dialogForm = _useData;
        });
      });
    },
    /**
      * @date 2025/07/14
      * @author wolfMan
      * @description {计算费用合计}
    */
    calPriceCount () {
      const { priceAmount, priceUnit } = this.dialogForm;
      let _total = multiply(priceAmount, priceUnit);
      this.$set(this.dialogForm, 'priceCount', _total);
    },
    /**
      * @date 2025/07/13
      * @author wolfMan
      * @description {信息弹层表单提交}
    */
    dialogSubmit () {
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          this.dialogLoading = true;
          let _params = this.MixinClone(this.dialogForm);
          _params.orderId = this.orderId;
          // 保存接口类型
          let _service = this.status === 'new' ? API_Expense.addService : API_Expense.updateService;
          _service(_params).then(() => {
            this.$msgSuccess(`${this.status==='new'?'新增':'修改'}成功`);
            this.onHide();
            this.$emit('refresh');
          }).always(() => {
            this.dialogLoading = false;
          });
        } else {
          console.log('error submit!!');
          return false;
        };
      });
    }
  }
};
</script>